<template>
  <div id="app">
    <h1>Hello App!</h1>
    <p>
      <!--路由链接-->
      <!--字符串跳转-->
      <RouterLink to="/home">首页</RouterLink>
      <!--对象跳转-->
      <RouterLink :to="{ path: '/about' }">关于</RouterLink>
      <!--具名跳转-->
      <RouterLink :to="{ name: 'news' }">新闻</RouterLink>
    </p>
    <div class="content">
      <RouterView /><!--路由出口-->
    </div>
  </div>
</template>
<!-- vue3写法 -->
<script lang="ts" setup>
import { userStore } from '@/store/user'
const user = userStore();
console.log(user.username)
// 不建议直接修改
user.username = 'roy'
// 推荐这种
user.changeUsername('666')
console.log(user.getUsername)
</script>
<style>
a {
  margin: 10px;
}

.content {
  background: yellowgreen;
  widows: 10%;
  height: 400px;
  border: 1cap;
  border-radius: 10px;
}
</style>